<template>
    <div class="member-list" :class="{'member-list-two':membetList.length<3}">
        <div class="member-item" v-for="item in membetList" :key="item.user_id">
            <div class="mem-top flexbox flexcenter">
                <div class="mem-title">{{item.user_name}}</div>
                <el-popover placement="top" open-delay="500" title="" width="" trigger="hover" content="人员总产能" popper-class="project-popper">
                    <div class="mem-num" slot="reference">{{item.capacity}}</div>
                </el-popover>
                <Progress :progress="getProgress(item.sync_sum,item.capacity)" />
            </div>
            <div class="mem-fot flexbox">
                <el-popover placement="bottom" open-delay="500" title="" width="330" trigger="hover" class="flex" popper-class="project-popper">
                    <div class="popper-content">
                        <template v-if="item.free_sid.length>0">
                            <div class="popper-title">自由本</div>
                            <div class="popper-type2" v-for="fritem in item.free_sid" :key="fritem.id">
                                {{fritem.brand_name}}/{{fritem.product_name}}/{{filters.chanelName2(fritem.channel)}}/{{filters.sceneFilter(fritem.business_scene)}}
                            </div>
                        </template>
                        <div class="null-text" v-else>无</div>
                    </div>
                    <div class="mem-data flexbox flexcolumn flexcenter flexjust" slot="reference">
                        <div class="mem-type">{{item.free_sum}}</div>
                        <div class="mem-text">自由本</div>
                    </div>
                </el-popover>
                <el-popover placement="bottom" open-delay="500" title="" width="330" trigger="hover" class="flex" popper-class="project-popper">
                    <div class="popper-content">
                        <template v-if="item.unfinish_sid.length>0">
                            <div class="popper-title">未完成视频</div>
                            <div class="popper-type2" v-for="fiitem in item.unfinish_sid" :key="fiitem.id">
                                {{fiitem.brand_name}}/{{fiitem.product_name}}/{{filters.chanelName2(fiitem.channel)}}/{{filters.sceneFilter(fiitem.business_scene)}}
                            </div>
                        </template>
                        <div class="null-text" v-else>无</div>
                    </div>
                    <div class="mem-data flexbox flexcolumn flexcenter flexjust" slot="reference">
                        <div class="mem-type">{{item.unfinish_num}}</div>
                        <div class="mem-text">未完成</div>
                    </div>
                </el-popover>
                <el-popover placement="bottom" open-delay="500" title="" width="330" trigger="hover" class="flex" popper-class="project-popper">
                    <div class="popper-content">
                        <template v-if="item.undrop_list.length>0">
                            <div class="popper-title">未投放视频</div>
                            <div class="popper-type2" v-for="(dritem,index) in item.undrop_list" :key="index">
                                {{dritem}}
                            </div>
                        </template>
                        <div class="null-text" v-else>无</div>
                    </div>
                    <div class="mem-data flexbox flexcolumn flexcenter flexjust" slot="reference">
                        <div class="mem-type">{{item.undrop_num}}</div>
                        <div class="mem-text">未投放</div>
                    </div>
                </el-popover>
                <el-popover placement="bottom" open-delay="500" title="" width="330" trigger="hover" class="flex" popper-class="project-popper">
                    <div class="popper-content">
                        <template v-if="item.project_sid.length>0">
                            <div class="popper-title">参与项目</div>
                            <div class="popper-type2" v-for="pritem in item.project_sid" :key="pritem.id">
                                {{pritem.brand_name}}/{{pritem.product_name}}/{{filters.chanelName2(pritem.channel)}}/{{filters.sceneFilter(pritem.business_scene)}}
                            </div>
                        </template>
                        <div class="null-text" v-else>无</div>
                    </div>
                    <div class="mem-data flexbox flexcolumn flexcenter flexjust" slot="reference">
                        <div class="mem-type">{{item.project_num}}</div>
                        <div class="mem-text">参与项目</div>
                    </div>
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script>
import Progress from "./Progress";
export default {
    props: {
        membetList: {
            type: Array,
            default: [],
        },
    },
    components: {
        Progress,
    },
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        getProgress(sync_sum, capacity) {
            let progress = (sync_sum / capacity * 100).toFixed(0);
            return progress;
        },
    },
};
</script>


<style scoped>
.member-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.member-item {
    padding: 12px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid #ebebeb;
    background: linear-gradient(
        179deg,
        #f7f9ff 0.99%,
        rgba(247, 249, 255, 0) 39.2%
    );
    box-shadow: 0px 1px 4px 0px rgba(200, 200, 200, 0.2);
}
.member-list-two{
    display: flex;
}
.member-list-two .member-item{
    width: 380px;
}
.mem-top {
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
}
.mem-title {
    font-size: 16px;
    font-weight: 700;
    color: #17233d;
    margin-right: auto;
}
.mem-num {
    font-size: 14px;
    color: #4475ff;
    font-weight: 700;
    border-radius: 6px;
    background: rgba(165, 177, 209, 0.1);
    padding: 0 8px;
    line-height: 28px;
    height: 28px;
}
.mem-fot {
    gap: 12px;
    margin-top: 12px;
}
.mem-data {
    height: 51px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #f1f2f3;
    color: #17233d;
}
.mem-type {
    font-size: 14px;
    line-height: 19px;
    height: 19px;
}
.mem-text {
    font-size: 12px;
    line-height: 16px;
    height: 16px;
    margin-top: 4px;
}
.popper-content {
    max-height: 400px;
    margin: 0 -12px;
    padding: 0 12px;
    overflow-y: auto;
}
.popper-title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    font-weight: 700;
}
.popper-type2 {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #ebebeb;
}
.null-text{
    text-align: center;
    font-size: 14px;
    color: #616c85;
}
</style>


